<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缘猫咖啡 - 与猫相伴的悠闲时光</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 头部和导航区域 -->
    <header class="catcafe_header">
        <div class="catcafe_logo_container">
            <img src="./images/logo.png" alt="缘猫咖啡店标志，一只卡通猫咪与咖啡杯组合的logo" class="catcafe_logo">
            <h1 class="catcafe_title">缘猫咖啡</h1>
        </div>
        <nav class="catcafe_nav">
            <ul class="catcafe_nav_list">
                <li class="catcafe_nav_item"><a href="#" class="catcafe_nav_link catcafe_active">首页</a></li>
                <li class="catcafe_nav_item"><a href="#catcafe_cats" class="catcafe_nav_link">猫咪家族</a></li>
                <li class="catcafe_nav_item"><a href="#catcafe_menu" class="catcafe_nav_link">饮品菜单</a></li>
                <li class="catcafe_nav_item"><a href="#catcafe_about" class="catcafe_nav_link">关于我们</a></li>
            </ul>
        </nav>
        <div class="catcafe_contact">
            <a href="tel:13812345678" class="catcafe_phone"><i class="fas fa-phone"></i> 198-5177-3024</a>
        </div>
    </header>

    <!-- Banner区域 -->
    <section class="catcafe_banner_section">
        <img src="./images/banner.jpg" alt="缘猫咖啡店内景，舒适温馨的环境中多只猫咪在休息区自由活动" class="catcafe_banner_img">
        <div class="catcafe_banner_text">
            <h2 class="catcafe_banner_title">与猫相伴 品味生活</h2>
            <p class="catcafe_banner_desc">在这里，时光慢下来，与猫咪一起度过美好时光</p>
            <a href="#catcafe_reservation" class="catcafe_banner_btn">立即预约</a>
        </div>
    </section>

    <!-- 通告区域 -->
    <section class="catcafe_notice_section">
        <div class="catcafe_notice_container">
            <span class="catcafe_notice_icon"><i class="fas fa-bullhorn"></i></span>
            <div class="catcafe_notice_content" id="catcafe_notice_content">
                <p>【2025春季特惠】会员卡9折优惠，每周二猫粮义卖日 | 新增4只英短猫咪，欢迎来撸猫 | 本周新品：樱花拿铁限时上市</p>
            </div>
        </div>
    </section>

    <!-- 主体内容区域 -->
    <main class="catcafe_main">
        <!-- 猫咪家族模块 -->
        <section class="catcafe_cats_section" id="catcafe_cats">
            <h2 class="catcafe_section_title">猫咪家族</h2>
            <p class="catcafe_section_desc">我们的店内明星，每一只都有独特的性格和故事</p>
            
            <div class="catcafe_cats_container" id="catcafe_cats_slider">
                <div class="catcafe_cats_card">
                    <div class="catcafe_cat_img_container">
                        <img src="./images/cat1.jpg" alt="奶油色英短猫咪，名叫奶糖，趴在猫爬架上睡觉的照片" class="catcafe_cat_img">
                    </div>
                    <div class="catcafe_cat_info">
                        <h3 class="catcafe_cat_name">奶糖</h3>
                        <p class="catcafe_cat_breed">英国短毛猫</p>
                        <p class="catcafe_cat_desc">奶糖是店里的元老，性格温顺，喜欢被抚摸头部，最爱吃小鱼干。</p>
                    </div>
                </div>
                <div class="catcafe_cats_card">
                    <div class="catcafe_cat_img_container">
                        <img src="./images/cat2.jpg" alt="黑白色的英短猫咪，名叫奥利奥，正在玩逗猫棒的照片" class="catcafe_cat_img">
                    </div>
                    <div class="catcafe_cat_info">
                        <h3 class="catcafe_cat_name">奥利奥</h3>
                        <p class="catcafe_cat_breed">英国短毛猫</p>
                        <p class="catcafe_cat_desc">奥利奥活泼好动，喜欢和客人互动，最喜欢追逐逗猫棒。</p>
                    </div>
                </div>
                <div class="catcafe_cats_card">
                    <div class="catcafe_cat_img_container">
                        <img src="./images/cat3.jpg" alt="橘色的美短猫咪，名叫小橘子，在窗台晒太阳的照片" class="catcafe_cat_img">
                    </div>
                    <div class="catcafe_cat_info">
                        <h3 class="catcafe_cat_name">小橘子</h3>
                        <p class="catcafe_cat_breed">美国短毛猫</p>
                        <p class="catcafe_cat_desc">小橘子爱晒太阳，性格慵懒，喜欢趴在顾客腿上睡觉。</p>
                    </div>
                </div>
                <div class="catcafe_cats_card">
                    <div class="catcafe_cat_img_container">
                        <img src="./images/cat5.jpg" alt="狸花猫，名叫小虎，与客人互动的照片" class="catcafe_cat_img">
                    </div>
                    <div class="catcafe_cat_info">
                        <h3 class="catcafe_cat_name">小虎</h3>
                        <p class="catcafe_cat_breed">狸花猫</p>
                        <p class="catcafe_cat_desc">小虎是店里的小馋猫，性格温顺，但是嘴馋，很喜欢偷喝客人的饮品。</p>
                    </div>
                </div>
                <div class="catcafe_cats_card">
                    <div class="catcafe_cat_img_container">
                        <img src="./images/cat4.jpg" alt="灰蓝色的俄罗斯蓝猫，名叫蓝莓，正在猫窝中蜷缩的照片" class="catcafe_cat_img">
                    </div>
                    <div class="catcafe_cat_info">
                        <h3 class="catcafe_cat_name">蓝莓</h3>
                        <p class="catcafe_cat_breed">俄罗斯蓝猫</p>
                        <p class="catcafe_cat_desc">蓝莓害羞内向，需要一些时间才会和陌生人熟悉，喜欢安静的角落。</p>
                    </div>
                </div>
                <div class="catcafe_cats_card">
                    <div class="catcafe_cat_img_container">
                        <img src="./images/cat2.jpg" alt="黑白色的英短猫咪，名叫奥利奥，正在玩逗猫棒的照片" class="catcafe_cat_img">
                    </div>
                    <div class="catcafe_cat_info">
                        <h3 class="catcafe_cat_name">奥利奥</h3>
                        <p class="catcafe_cat_breed">英国短毛猫</p>
                        <p class="catcafe_cat_desc">奥利奥活泼好动，喜欢和客人互动，最喜欢追逐逗猫棒。</p>
                    </div>
                </div>
                <div class="catcafe_cats_card">
                    <div class="catcafe_cat_img_container">
                        <img src="./images/cat1.jpg" alt="奶油色英短猫咪，名叫奶糖，趴在猫爬架上睡觉的照片" class="catcafe_cat_img">
                    </div>
                    <div class="catcafe_cat_info">
                        <h3 class="catcafe_cat_name">奶糖</h3>
                        <p class="catcafe_cat_breed">英国短毛猫</p>
                        <p class="catcafe_cat_desc">奶糖是店里的元老，性格温顺，喜欢被抚摸头部，最爱吃小鱼干。</p>
                    </div>
                </div>
            </div>
            <div class="catcafe_slider_controls">
                <button class="catcafe_slider_prev" id="catcafe_cats_prev"><i class="fas fa-chevron-left"></i></button>
                <button class="catcafe_slider_next" id="catcafe_cats_next"><i class="fas fa-chevron-right"></i></button>
            </div>
        </section>

        <!-- 饮品菜单模块 -->
        <section class="catcafe_menu_section" id="catcafe_menu">
            <h2 class="catcafe_section_title">饮品菜单</h2>
            <p class="catcafe_section_desc">精心制作的咖啡与特色饮品，与猫咪作伴更加惬意</p>
            
            <div class="catcafe_menu_container">
                <div class="catcafe_menu_category">
                    <h3 class="catcafe_menu_category_title">特色咖啡</h3>
                    <div class="catcafe_menu_items">
                        <div class="catcafe_menu_item">
                            <img src="./images/coffee1.jpg" alt="猫爪拿铁咖啡，奶泡上有可爱的猫爪造型" class="catcafe_menu_img">
                            <div class="catcafe_menu_details">
                                <h4 class="catcafe_menu_name">猫爪拿铁</h4>
                                <p class="catcafe_menu_desc">奶泡上的猫爪图案，浓郁咖啡与丝滑奶泡的完美结合</p>
                                <p class="catcafe_menu_price">¥32</p>
                            </div>
                        </div>
                        <div class="catcafe_menu_item">
                            <img src="./images/coffee2.jpg" alt="肉桂云朵咖啡，顶部有蓬松的奶泡和肉桂粉" class="catcafe_menu_img">
                            <div class="catcafe_menu_details">
                                <h4 class="catcafe_menu_name">肉桂云朵</h4>
                                <p class="catcafe_menu_desc">添加肉桂粉的奶泡咖啡，温暖香甜，回味悠长</p>
                                <p class="catcafe_menu_price">¥36</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="catcafe_menu_category">
                    <h3 class="catcafe_menu_category_title">特调饮品</h3>
                    <div class="catcafe_menu_items">
                        <div class="catcafe_menu_item">
                            <img src="./images/drink1.jpg" alt="蓝莓气泡水，点缀着新鲜蓝莓果实和薄荷叶" class="catcafe_menu_img">
                            <div class="catcafe_menu_details">
                                <h4 class="catcafe_menu_name">蓝莓气泡水</h4>
                                <p class="catcafe_menu_desc">新鲜蓝莓与苏打水的清爽结合，点缀薄荷叶</p>
                                <p class="catcafe_menu_price">¥28</p>
                            </div>
                        </div>
                        <div class="catcafe_menu_item">
                            <img src="./images/drink2.jpg" alt="樱花拿铁，淡粉色饮料上漂浮着樱花花瓣" class="catcafe_menu_img">
                            <div class="catcafe_menu_details">
                                <h4 class="catcafe_menu_name">樱花拿铁</h4>
                                <p class="catcafe_menu_desc">2025春季限定，淡雅樱花与牛奶的甜美融合</p>
                                <p class="catcafe_menu_price">¥38</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 关于我们模块 -->
        <section class="catcafe_about_section" id="catcafe_about">
            <h2 class="catcafe_section_title">关于我们</h2>
            
            <div class="catcafe_about_container">
                <div class="catcafe_about_image">
                    <img src="./images/cafe.jpg" alt="缘猫咖啡店内环境，温馨舒适的装修风格，猫咪与顾客互动的场景" class="catcafe_about_img">
                </div>
                <div class="catcafe_about_content">
                    <div class="catcafe_about_text">
                        <p>缘猫咖啡创立于2025年，是一家融合咖啡文化与猫咪陪伴的特色咖啡馆。我们致力于为猫咪爱好者提供一个与猫咪亲密接触的温馨空间，同时享受优质的咖啡与饮品。</p>
                        <p>我们所有的猫咪都经过专业训练和健康检查，确保它们适合与人互动。店内环境每日消毒，为猫咪和顾客提供安全舒适的空间。</p>
                    </div>
                    
                    <div class="catcafe_personal_info">
                        <h3 class="catcafe_personal_title">店长介绍</h3>
                        <div class="catcafe_personal_content">
                            <div class="catcafe_personal_image">
                                <img src="./images/店长.jpg" alt="店长朱丽雅的照片，一位微笑的年轻女性抱着一只猫" class="catcafe_personal_img">
                            </div>
                            <div class="catcafe_personal_details">
                                <p class="catcafe_personal_name">朱丽雅</p>
                                <p class="catcafe_personal_major">软件工程</p>
                                <p class="catcafe_personal_id">学号：2410250042</p>
                                <p class="catcafe_personal_intro">自幼喜爱猫咪，一直想开一家猫咖，将喜爱的东西和工作融合。希望通过缘猫咖啡，将对猫咪的热爱与咖啡文化相结合，创造一个让人放松身心的空间。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 预约表单 -->
        <section class="catcafe_reservation_section" id="catcafe_reservation">
            <h2 class="catcafe_section_title">预约访问</h2>
            <p class="catcafe_section_desc">提前预约，确保您有更好的体验</p>
            
            <form class="catcafe_reservation_form" id="catcafe_reservation_form">
                <div class="catcafe_form_group">
                    <label for="catcafe_name" class="catcafe_form_label">姓名</label>
                    <input type="text" id="catcafe_name" name="name" class="catcafe_form_input" required>
                </div>
                <div class="catcafe_form_group">
                    <label for="catcafe_phone" class="catcafe_form_label">电话</label>
                    <input type="tel" id="catcafe_phone" name="phone" class="catcafe_form_input" required>
                </div>
                <div class="catcafe_form_group">
                    <label for="catcafe_date" class="catcafe_form_label">日期</label>
                    <input type="date" id="catcafe_date" name="date" class="catcafe_form_input" required>
                </div>
                <div class="catcafe_form_group">
                    <label for="catcafe_time" class="catcafe_form_label">时间</label>
                    <select id="catcafe_time" name="time" class="catcafe_form_input" required>
                        <option value="">请选择时间</option>
                        <option value="10:00">10:00 - 12:00</option>
                        <option value="14:00">14:00 - 16:00</option>
                        <option value="16:00">16:00 - 18:00</option>
                        <option value="18:00">18:00 - 20:00</option>
                    </select>
                </div>
                <div class="catcafe_form_group">
                    <label for="catcafe_persons" class="catcafe_form_label">人数</label>
                    <input type="number" id="catcafe_persons" name="persons" min="1" max="10" class="catcafe_form_input" required>
                </div>
                <div class="catcafe_form_group">
                    <label for="catcafe_message" class="catcafe_form_label">留言</label>
                    <textarea id="catcafe_message" name="message" class="catcafe_form_textarea"></textarea>
                </div>
                <button type="submit" class="catcafe_form_submit">提交预约</button>
            </form>
        </section>
    </main>

    <!-- 底部版权区域 -->
    <footer class="catcafe_footer">
        <div class="catcafe_footer_container">
            <div class="catcafe_footer_info">
                <img src="./images/logo.png" alt="缘猫咖啡店标志，一只卡通猫咪与咖啡杯组合的logo" class="catcafe_footer_logo">
                <h3 class="catcafe_footer_title">缘猫咖啡</h3>
                <p class="catcafe_footer_address">地址：顺河回族区明伦街85号</p>
                <p class="catcafe_footer_hours">营业时间：周一至周日 10:00-21:00</p>
                <p class="catcafe_footer_contact">电话：198-5177-3024</p>
            </div>
            <div class="catcafe_footer_links">
                <h4 class="catcafe_footer_links_title">快速链接</h4>
                <ul class="catcafe_footer_links_list">
                    <li><a href="#" class="catcafe_footer_link">首页</a></li>
                    <li><a href="#catcafe_cats" class="catcafe_footer_link">猫咪家族</a></li>
                    <li><a href="#catcafe_menu" class="catcafe_footer_link">饮品菜单</a></li>
                    <li><a href="#catcafe_about" class="catcafe_footer_link">关于我们</a></li>
                    <li><a href="#catcafe_reservation" class="catcafe_footer_link">预约访问</a></li>
                </ul>
            </div>
            <div class="catcafe_footer_social">
                <h4 class="catcafe_footer_social_title">关注我们</h4>
                <div class="catcafe_footer_social_icons">
                    <a href="#" class="catcafe_social_icon"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="catcafe_social_icon"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="catcafe_social_icon"><i class="fab fa-qq"></i></a>
                    <a href="#" class="catcafe_social_icon"><i class="fab fa-douban"></i></a>
                </div>
            </div>
        </div>
        <div class="catcafe_footer_copyright">
            <p>&copy; 2025 缘猫咖啡 版权所有</p>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./js/main.js"></script>
</body>
</html> 